<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			height: 0;
		}
		.one{
			width: 400px;
			height: 400px;
			background-color: red;
			overflow: hidden;
		}
		.two{
			width: 100px;
			height: 100px;
			background-color: blue;
			margin-top: 30px;
			margin-left: 30px;
		}
		div{
			width: 200px;
			height: 200px;
			background-color: red;
			margin-bottom: 150px;
		}
		.b{
			background-color: blue;
			margin-top: 100px;
		}
	</style>
</head>
<body>
	<div class="a"></div>
	<div class="b"></div>
	<!-- 同级之间 两个边距相遇 他们两个真正的距离 是 最大值的那个	 而不是叠加 -->

	<!-- 父元素的第一个子元素 如果设置上外边距，同时父元素没有设置border 或 padding 那么将会影响父级一块移动 -->
	<!-- 解决方案：
			1.父级设置有效的padding 或者border
			2.父级设置 overflow:hidden(超出隐藏)
			3.父级或者子元素使用了浮动或者定位 -->
	<!-- <div class="one">
		<div class="two"></div>
	</div>
 -->
</body>
</html>